<template>
	<cc-popup ref="popupRef">
		<view class="cc-simple-dialog-wrap">
			<view class="title">
				{{title}}
			</view>
			<view class="content">
				<slot></slot>
			</view>
			<view class="footer">
				<view class="btn cancel-btn">
					{{cancelBtnText}}
				</view>
				<button id="ok-btn" class="btn ok-btn">
					{{okBtnText}}
				</button>
			</view>
		</view>
	</cc-popup>
</template>

<script>
	export default {
		name: "cc-simple-dialog",
		props: {
			// 位置
			position: {
				type: String,
				default: 'center',
				validator: (val) => ['center', 'bottom'].includes(val)
			},

			hideTabBar: {
				type: Boolean,
				default: false
			},

			color: {
				type: String,
				default: '#007AFF'
			},

			bgcolor: {
				type: String,
				default: '#ffffff'
			},

			title: {
				type: String,
				default: ''
			},

			okBtnText: {
				type: String,
				default: '确定'
			},

			cancelBtnText: {
				type: String,
				default: '取消'
			},
		},
		computed: {

		},
		data() {
			return {};
		},
		mounted() {

		},
		methods: {
			show() {
				this.$refs.popupRef.show();
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "@/cc-ui-tools/scss/theme.scss";
	@import "@/cc-ui-tools/scss/animation.scss";

	.cc-simple-dialog-wrap {
		width: 580rpx;
	}

	.title {
		color: #333333;
		font-size: 36rpx;
		text-align: center;
	}

	.content {
		color: #595959;
		margin-top: 36rpx;
		margin-bottom: 36rpx;
		line-height: 50rpx;
		flex: 1;
		white-space: pre-wrap;

		text {
			color: var(--color);
		}
	}

	.footer {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;

		// 重置微信小程序的按钮样式
		button:after {
			border: none;
		}

		.btn {
			min-width: 220rpx;
			line-height: 90rpx;
			padding: 0 10rpx;
			border-radius: 2px;
			text-align: center;
			font-size: 32rpx;
			white-space: nowrap;
			word-break: break-all;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.cancel-btn {
			background-color: #f6f6f6;
			color: #666666;
		}

		.ok-btn {
			line-height: 80rpx;
			background-color: #000;
			color: #fff;
			margin: 0;
		}
	}

	.dialog-bottom {
		.footer {
			padding: 0 40rpx;

			.btn {
				min-width: 250rpx;
			}
		}
	}
</style>